<%@ page import="com.baomidou.mybatisplus.extension.plugins.pagination.Page" %>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>教师列表</title>
</head>
<body>
<!-- page heading start-->
<div class="page-heading">
<%--    <h3>--%>
<%--        教师列表--%>
<%--    </h3>--%>
    <ul class="breadcrumb">
        <li>
            <a href="#"> 主页 </a>
        </li>
        <li>
            <a href="#"> 教师管理 </a>
        </li>
        <li class="active"> 教师列表 </li>
    </ul>
</div>
<!-- page heading end-->

<!--body wrapper start-->
<div class="wrapper">
    <div class="row">
        <div class="col-sm-12">
            <section class="panel">
                <header class="panel-heading">
                    Table List
                    <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                        <a href="javascript:;" class="fa fa-times"></a>
                     </span>
                </header>
                <div class="panel-body">
                    <div class="adv-table editable-table ">
                        <div class="clearfix">
                            <div class="btn-group col-md-3" style="margin-bottom: 10px">
                                <button id="editable-sample_new" class="btn btn-primary" onclick="window.location.href='/teacher/save'">
                                    新增 <i class="fa fa-plus"></i>
                                </button>
                                <button id="selectAll" class="btn btn-primary" onclick="setSelectAll()" id="selAll">
                                    全选 <i class="fa fa-plus-circle"></i>
                                </button>
                                <button id="selectReverse" class="btn btn-primary" onclick="setSelectReverse()">
                                    反选 <i class="fa fa-plus-square-o"></i>
                                </button>
                                <button id="delete" class="btn btn-primary" onclick="deleteTeachers()" >
                                    删除 <i class="fa fa-plus-square-o"></i>
                                </button>
                            </div>
                            <form action="/teacher/conditionPage" method="get" onsubmit="return searchTeachers()">
                                <div class="btn-group pull-right col-md-9">
                                    <div class="col-md-1 text-right">
                                        <label class="text-info" for="tcId" style="margin-top: 7px">查询:</label>
                                    </div>
                                    <div class="col-md-3">
                                        <input id="tcId"  name="teacherName" type="search" placeholder="教师姓名" class="form-control">
                                    </div>
                                    <div class="col-md-3">
                                        <select id="tcLevel" class="form-control" name="teacherLevel">
                                            <option value="" disabled selected style="display: none">教师资历</option>
                                            <option value="1">初级教师</option>
                                            <option value="2">高级教师</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <input name="teacherIntro" id="tcIntro" type="search" placeholder="教师简历/资历" class="form-control">
                                    </div>
                                    <div class="col-md-1">
                                        <button type="submit" class="btn btn-info">搜索</button>
                                    </div>
                                    <div class="col-md-1">
                                        <button type="button" class="btn" onclick="window.location.href='/teacher/list'">返回</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="space15"></div>
<%--                        Table 表格--%>
                        <table class="table table-striped table-hover table-bordered" id="editable-sample">
<%--                            表头--%>
                            <thead>
                            <tr>
                                <th> option </th>
                                <th> 教师姓名 </th>
                                <th> 教师简介 </th>
                                <th> 教师资历 </th>
                                <th> 教师职称 </th>
                                <th> Edit </th>
                                <th> Delete </th>
                            </tr>
                            </thead>
                            <tbody>
<%--                            JSTL c标签遍历request中的list--%>
                            <c:forEach items="${page.records}" var="teacher">
                                <tr class="">
                                    <td><input type="checkbox" class="checkbox" name="checkAll" value="${teacher.id}"></td>
                                    <td>${teacher.name}</td>
                                    <td>${teacher.intro}</td>
                                    <td>${teacher.career}</td>
                                    <td>${teacher.level == 1 ? "初级教师" : "高级教师"}</td>
                                    <td><a class="edit" href="/teacher/findById/${teacher.id}">Edit</a></td>
                                    <td><a class="delete" href="/teacher/deleteTeacher/${teacher.id}">Delete</a></td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>

<%--                        page是封装好的对象,total是由后端处理好的总页数--%>
                        <div class="">
                            <ul class="pagination" style="margin:0px auto; display: block; width: 20%">
                                <li><a href="/teacher/list/${page.current - 1 > 0 ? page.current - 1 : 1}/${page.size}">«</a></li>
                                <c:forEach begin="1" end="${total}" var="i">
                                    <li class="${page.current == i ? "active" : ""}"><a href="/teacher/list/${i}/${page.size}">${i}</a></li>
                                </c:forEach>
                                <li><a href="/teacher/list/${(page.current + 1 < total) ? (page.current + 1) : total}/${page.size}">»</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<script>
    var checkboxs = document.getElementsByName("checkAll")
    function setSelectAll(){
        for(var i=0; i<checkboxs.length; i++) {
            checkboxs[i].checked=true;
        }

    }
    function setSelectReverse(){
        for (var i=0;i<checkboxs.length;i++) {
            checkboxs[i].checked = !checkboxs[i].checked;
        }
    }
    function deleteTeachers(){
        var teacherIds = ""
        for(var i = 0; i < checkboxs.length; i++){
            if(checkboxs[i].checked == true)
                teacherIds += checkboxs[i].value + ","
        }
        $.ajax({
            type: "post",
            url: '/teacher/deleteBatchIds',
            data: {
                teacherIds
            },
            success: function () {
                toastr.success("批量删除成功!")
                setTimeout(function (){
                    window.location.reload()
                },1000)
            },
            error: function () {
                toastr.error("批量删除失败!")
                setTimeout(function (){
                    window.location.reload()
                },1000)
            },
        })
    }
    function searchTeachers(){
       return true;
    }
</script>
<!--body wrapper end-->
</body>
</html>
